/*

@description: 主页头部底部封装(样式)

@author: 赖赖

@update: 2021年8月31日14:55:35

 */

  /* 初始化 */ 
  html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 
  header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 
  table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} 
  html,body,fieldset,img,iframe,abbr{border:0;} 
  i,cite,em,var,address,dfn{font-style:normal;} 
  [hidefocus],summary{outline:0;} li{list-style:none;} 
  h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;}
  pre,code,kbd,samp{font-family:inherit;} 
  q:before,q:after{content:none;}
  textarea{overflow:auto;resize:none;} 
  label,summary{cursor:default;} 
  a,button{cursor:pointer;} 
  h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} 
  del,ins,u,s,a,a:hover{text-decoration:none;} 
  body{background:#fff;} a,a:hover{color:#333;}
  
   //清楚浮动常用格式
  .clr::after{
      content: "";
      display: block;
      clear: both;
  }
  
// 全局参数
@width: 1200px;
@color: rgb(34, 38, 50);

//头部
header {
    .drjk {
        //登入接口
        height: 36px;
        background: @color;

        .zk {
            //登入主框
            width: @width;
            height: 100%;
            margin: auto;
            display: flex;
            justify-content: space-between;

            a {
                //字体
                font-size: 12px;
                padding-right: 8px;
                color: rgb(250, 250, 250);
                line-height: 36px;
            }

            a:hover {
                color: rgb(221, 8, 8);
            }
        }
    }

    nav {
        background: rgb(255, 255, 255);

        .dhzk {
            //导航主框
            width: @width;
            height: 100px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                //图标
                width: 120px;
                height: 60px;
            }

            span {
                font-size: 45px;
                font-weight: 700;
                color: rgb(226, 35, 26);
                font-family: fantasy;
                letter-spacing: 10px;
            }

            .xl {
                //导航下拉栏
                height: 100%;
                display: flex;
                position: relative;

                div {
                    //导航块级样式
                    width: 120px;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 16px;
                    position: relative;


                    p {
                        //下拉框位置初始
                        position: absolute;
                        right: -105px;
                        top: 100px;
                        overflow: hidden;
                        display: none;

                        a {
                            //服务内容
                            padding: 66px;
                            line-height: 100px;
                        }

                        //字体显示样式
                        a:hover {
                            color: rgb(250, 14, 24);
                        }
                    }
                }

                h1 {
                    // 横线
                    position: absolute;
                    top: 96px;
                    left: 140px;
                    width: 80px;
                    height: 4px;
                    border-radius: 10px;
                    background: rgb(250, 14, 24);
                }

                .sy:hover {
                    //悬浮首页效果
                    color: rgb(250, 250, 250);
                    background: rgb(226, 35, 26);
                }

                .wlfu:hover {
                    cursor:pointer;
                    //悬浮物流服务效果
                    color: rgb(250, 250, 250);
                    background: rgb(226, 35, 26);
                }

                .wlfu:hover>a {
                    //悬浮物流服务效果
                    color: rgb(250, 250, 250);
                }

                .gywm:hover {
                    //悬浮关于我们效果
                    color: rgb(250, 250, 250);
                    background: rgb(226, 35, 26);
                }

                .wlfu:hover>p {
                    //物流悬浮显示
                    z-index: 99;
                    display: block;
                    height: 100px;
                    border-top: 2px solid rgb(222, 225, 230);
                    border-bottom: 2px solid rgb(222, 225, 230);
                }
            }

            div>p {
                //下拉框显示
                width: @width;
                background: rgb(250, 250, 250);
            }
        }
    }
}

//底部
footer {
    height: 180px;
    background: @color;

    .zt {
        //底部主体
        width: @width;
        height: 140px;
        margin: auto;
        padding-top: 40px;
        display: flex;
        justify-content: space-between;

        img {
            //图片
            width: 160px;
            height: 86px;
        }

        nav {
            //分栏            height: 104px;

            .bslj{
                text-align: center;
                a {
                    //字体
                    margin: 20px 0;
                    color: rgb(250, 250, 250);
                    font-size: 14px;
                }
    
                a:hover {
                    color: rgb(221, 8, 8);
                }
    
                span {
                    //横杠
                    font-size: 16px;
                    color: rgb(250, 250, 250);
                    padding: 20px 10px;
                }
            }

            .bq {
                //版权
                font-size: 14px;
                margin-top: 40px;
                color: rgb(144, 148, 148);

                .h {
                    //链接字体
                    color: rgb(144, 148, 148);
                }
            }

            .w {
                //公安网
                margin-top: 8px;
                text-align: center;

                a {
                    //公安网字体
                    color: rgb(144, 148, 148);
                }
            }
        }

        .lxfs{
            .lxtp{
                width: 153px;
                height: 94px;
                background-size: cover;
            }
        }
    }
}

//侧边栏
aside {
    width: 50px;
    height: 88px;
    background: @color;
    color: rgb(250, 250, 250);
    text-align: center;
    line-height: 88px;
    position: fixed;
    right: 0;
    bottom: 210px;
    font-size: 16px;
}